<template>
  <div class="plat-form-wrap">
    <Banner :bgImg="bgImg"></Banner>
    <div class="body-wrap home-mini-width">
      <TitleCard
        :titles="titles"
        :showMore="false"
        :loading="loading"
        :isEmpty="isEmpty"
        :isSwitch="true"
        :type="'threeCard'"
        @switchTitle="switchTitle"
        :selectedLabel="selectedLabel"
      >
        <template slot="rightOperation">
          <div class="btn-wrap">
            <a-button class="btn-item" @click="back">返回</a-button>
          </div>
        </template>
        <div class="patentPreAudit">
          <component
            :is="curComponents"
            @switchForm="handleSwitch"
            :data="content.data"
          />
        </div>
      </TitleCard>
    </div>
  </div>
</template>

<script>
import Banner from '@/views/components/banner.vue'
import { titles } from './config.js'
import { mapGetters, mapMutations } from 'vuex'
import mixinsBackStack from '@/views/backstageSupport/mixins'
import Record from './pages/record.vue'
import Reference from './pages/reference.vue'
import Brief from '../components/brief.vue'
import { getContent } from '@/api/frontCommon'

export default {
  mixins: [mixinsBackStack],
  data() {
    return {
      bgImg: require('@/assets/images/preAuditBanner.png'),
      loading: false,
      isEmpty: false,
      titles,
      selectedLabel: titles[0].key,
      curComponents: '',
      content: {},
      id: ''
    }
  },
  components: {
    Banner,
    Record,
    Reference,
    Brief
  },
  computed: {
    ...mapGetters('user', ['visitor']),
  },
  mounted() {
    //刷新页面响应
    const { toComponent, id } = this.$route.query
    if (toComponent) {  //点击二级菜单不会带toComponent值，取默认
      this.selectedLabel = toComponent
      this.handleSwitch(toComponent, id)
    } else {
      this.initSetting()
    }
  },
  watch: {
    $route: {
      //刷新页面响应
      handler: function (val) {
        const { toComponent, id } = val.query
        this.selectedLabel = toComponent  //对应更新selectLabel值
        this.handleSwitch(toComponent, id)
      },
      // 深度观察监听
      deep: true
    }
  },
  methods: {
    ...mapMutations('headerMenu', ['updateMenuItemStatus']),
    initSetting() {
      this.handleSwitch('record')
    },
    switchTitle(selectedItem) {
      const { key, id } = selectedItem
      if (key !== 'preAuidt') {
        this.selectedLabel = key
        this.id = id
      }
      this.handleSwitch(key, this.id)
    },
    async handleSwitch(type, id) {
      switch (type) {
        case 'reference':
          this.curComponents = 'Reference'
          break
        case 'preAuidt':
          window.open('https://cnippc.cn')
          break
        case 'record':
          this.curComponents = 'Record'
          break
        default:
          this.content = await getContent(id)
          this.curComponents = 'Brief'
          break
      }
    },
    back() {
      this.$router.push({ name: 'publicServe' })
    }
  }
}
</script>
